<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装修</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        * {
          box-sizing: border-box;  
        }
        #tb {
            width: 100%;
            height: 30px;
            /* border: 1px solid red; */
            background-color: #f5f5f5;
        }

        #tb2 {
            width: 100%;
            height: 80px;
            border: 1px solid red;
        }

        #zuo {
            width: 30%;
            height: 30px;
            /* border: 1px solid blue; */
            float: left;
        }

        #z2 {
            width: 1500px;
            height: 80px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        #z .layui-nav {
            background-color: #f5f5f5;
            line-height: 30px;
            height: 30px;
        }

        .layui-nav .li {
            line-height: 30px;
            width: 400px;
            position: relative;
        }

        .layui-nav .li span {
            display: none;
        }

        .layui-nav .li dl {
            top: 30px;
        }

        .layui-nav .li a {
            color: #000;
        }

        .layui-nav:hover .li a {
            color: #000;
        }

        #you {
            width: 69%;
            height: 30px;
            /* border: 1px solid blue; */
            float: right;
        }

        #you ul {
            float: right;
        }

        #you .layui-nav .layui-nav-item a {
            color: gray;
            line-height: 30px;
        }

        #z {
            width: 1500px;
            height: 30px;
            margin: auto;
        }

        .layui-nav-bar {
            display: none;
        }

        .logo {
            background-image: url("img/common_bg_s.png  ");
            width: 12px;
            height: 14px;
            position: absolute;
            top: 9px;
            left: -14px;
            background-position: -192px -180px;
        }

        #dq {
            width: 410px;
            height: 230px;
            /* border: 1px solid red; */
        }

        #rmcs a {
            color: #0cb46a;
        }

        #rmcs {
            width: 410px;
            height: 35px;
            /* border: 1px solid black; */
        }

        #diqu {
            width: 410px;
            height: 160px;
            /* border: 1px solid black; */
        }

        .qiqu {
            color: #0cb46a;
            display: inline-block;
            padding: 0 35px;
            line-height: 30px;
        }

        #gd {
            margin: 0 35px;
            color: gray;
        }

        #yc a {
            /* float: right; */
            line-height: 30px;
            color: gray;
        }

        #tp {
            width: 300px;
            height: 80px;
            border: 1px solid black;
            position: relative;
            float: left;
        }

        #tp1 {
            background-image: url("img/common_bg_s.png");
            width: 132px;
            height: 47px;
            position: absolute;
            background-position: 0 -208px;
            top: 15px;
        }

        #tp2 img {
            width: 145px;
            margin-top: 15px;
            margin-left: 140px;
        }

        #sy-nav {
            width: 700px;
            height: 80px;
            border: 1px solid black;
            margin: auto;
        }

        #sy-nav .layui-nav {
            background-color: #fff;
            line-height: 75px;
            height: 75px;
        }
        
        #sj {
            background-image: url("./img/common_bg_s.png");
            position: absolute;
            width: 11px;
            height: 16px;
            background-position:  -176px -180px;
            top: 30px;
            left: 90px;
        }

        #ss {
            width: 255px;
            height: 40px;
            border: 1px solid gray;
            float: right;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div><img style="width: 1920px;" src="./img/bcf8a37ab59919138bfa3bce86b14a1c29345.jpg" alt=""></div>
    <div id="tb">
        <div id="z">
            <ul id="zuo" class="layui-nav" lay-filter="">
                <li class="layui-nav-item li">
                    <i class="logo"></i>
                    <a style="display: inline-block; padding: 0;" href="javascript:;">郑州</a>
                    <span style="color: #0cb46a; display: inline-block;">[切换]</span>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <div id="dq">
                            <div id="rmcs">
                                <a href="">热门城市</a>
                            </div>
                            <ul id="diqu">
                                <li class="qiqu">北京</li>
                                <li class="qiqu">上海</li>
                                <li class="qiqu">重庆</li>
                                <li class="qiqu">深圳</li>
                                <br>
                                <li class="qiqu">广东</li>
                                <li class="qiqu">河南</li>
                                <li class="qiqu">郑州</li>
                                <li class="qiqu">开封</li>
                                <br>
                                <li class="qiqu">洛阳</li>
                                <li class="qiqu">鹤壁</li>
                                <li class="qiqu">安阳</li>
                                <li class="qiqu">漯河</li>
                                <br>
                                <li class="qiqu">许昌</li>
                                <li class="qiqu">商丘</li>
                                <li class="qiqu">周口</li>
                                <li class="qiqu">新乡</li>
                            </ul>
                            <div id="gd">
                                更多>
                            </div>
                        </div>
                    </dl>
                </li>
            </ul>
            <div id="you">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item"><a href="">登录</a></li>
                    <li class="layui-nav-item"><a href="">注册</a></li>
                    <li class="layui-nav-item"><a href="">我的土巴兔</a>
                        <dl class="layui-nav-child" style="top: 30px;">
                            <!-- 二级菜单 -->
                            <dd><a href="">我的工地直播</a></dd>
                            <dd><a href="">我的商城订单</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">商家中心</a>
                        <dl class="layui-nav-child" style="top: 30px;">
                            <!-- 二级菜单 -->
                            <dd><a href="">装修公司登录</a></dd>
                            <dd><a href="">装修公司入驻</a></dd>
                            <dd><a href="">装修公司APP</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">建材中心</a>
                        <dl class="layui-nav-child" style="top: 30px;">
                            <!-- 二级菜单 -->
                            <dd><a href="">建材商登录</a></dd>
                            <dd><a href="">建材商入驻</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">创建者中心</a></li>
                    <li class="layui-nav-item"><a href="">意见反馈</a></li>
                    <li class="layui-nav-item"><a style="color: #fd5a00;" href="">资讯热线:4006-900-288</a>
                        <dl class="layui-nav-child" style="top: 30px; width: 280px; height: 240px; left: -100px;">
                            <!-- 二级菜单 -->
                            <div style="width: 279px; height:60px;">
                                <p style="color:black; font-size:20px; margin-top: 10px; margin-left: 45px;">联系土巴兔装修管家
                                </p>
                            </div>
                            <div style="width: 279px; height:50px; ">
                                <div
                                    style="width: 200px; height:30px; border: 1px solid gray; margin-top: 10px; margin-left: 40px;">
                                    <p style="color: gray;">输入手机号,将为您发送预算明细</p>
                                </div>
                            </div>
                            <div
                                style="width: 200px; height:40px; background-color: #0eaf63; margin-top: 10px; margin-left: 40px;">
                                <p style="margin-left: 60px;">立即免费获取</p>
                            </div>
                            <div style="width: 279px;height: 64px;">
                                <div style="line-height: 20px; margin-top: 20px; margin-left: 10px;">
                                    <span style="color:gray"><span style="color:red">*</span> 通话结束后,本次通话记录将以短信形式</span>
                                    <br>
                                    <span style="color: gray;">免费发送到您输入的手机上!</span>
                                </div>

                            </div>
                        </dl>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div id="tb2">
        <div id="z2">
            <div id="tp">
                <div id="tp1">
                </div>
                <div id="tp2">
                    <img src="./img/64450ce62b6d966c2b7e9ea547d4e80679243.gif" alt="">
                </div>
            </div>
            <div id="ss">
                <input style="margin-top: 10px; width: 200px; color: gray; border:0;" type="text" value="搜装修公司/问题/攻略/效果图">
            </div>
            <div></div>
            <div id="sy-nav">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item"><a style="color: #0cb46a;font-size: 16px; margin-top: 10px;" href="">首页</a></li>
                    <li class="layui-nav-item"><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">效果图</a></li>
                    <li class="layui-nav-item"><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">装修公司</a></li>
                    <li class="layui-nav-item"><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">装修攻略</a></li>
                    <li class="layui-nav-item"><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">保障服务</a></li>
                    <li class="layui-nav-item"><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">更多</a></li>
                    <li class="layui-nav-item" style="position: relative;"><i id="sj"></i><a style=" color: black; font-size: 16px; margin-top: 10px;" href="">下载APP</a></li>
                </ul>
            </div>
            
        </div>
    </div>

    </div>
</body>

</html>
<script src="./layui/layui.all.js"></script>